<template>
	<view class="wrapper">
		<template v-if="carts.length">
			<!-- 收货信息 -->
			<view class="shipment">
				<template v-if="address">
					<view class="dt">收货人:</view>
					<view class="dd meta">
						<text class="name">{{ address.userName }}</text>
						<text class="phone">13535337057</text>
					</view>
					<view class="dt">收货地址:</view>
					<view class="dd">{{ fullAddress }}</view>
				</template>
				<view v-else><button type="primary" @click="saveAddress">获取收货地址</button></view>
			</view>
			<!-- 购物车 -->
			<view class="carts">
				<view class="item">
					<!-- 店铺名称 -->
					<view class="shopname">优购生活馆</view>

					<view v-for="(item, index) in carts" :key="item.goods_id" class="goods">
						<!-- 商品图片 -->
						<image class="pic" :src="item.goods_small_logo"></image>
						<!-- 商品信息 -->
						<view class="meta">
							<view class="name">{{ item.goods_name }}</view>
							<view class="price">
								<text>￥</text>
								{{ item.goods_price }}
								<text>.00</text>
							</view>
							<!-- 加减 -->
							<view class="amount">
								<text class="reduce" @click="decreaseCount(index)">-</text>
								<input type="number" :value="item.goods_number" class="number" />
								<text class="plus" @click="increaseCount(index)">+</text>
							</view>
						</view>
						<!-- 选框 -->
						<view @click="toggleState(index)" class="checkbox">
							<icon type="success" size="20" :color="item.goods_state ? '#ea4451' : '#ccc'"></icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 其它 -->
			<view class="extra">
				<label @click="toggleAll" class="checkall">
					<icon type="success" :color="allChecked ? '#ea4451' : '#ccc'" size="20"></icon>
					全选
				</label>
				<view class="total">
					合计:
					<text>￥</text>
					<label>{{ amount }}</label>
					<text>.00</text>
				</view>
				<view class="pay" @click="goPayment">结算({{ TcartCount }}个)</view>
			</view>
		</template>
		<view v-else class="tips">
			<view>卖完了 你走吧QAQ</view>
			<button type="primary" @click="gotoBuy">快去花钱</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';

export default {
	data() {
		return {
			order_number: ''
		};
	},
	computed: {
		...mapState('m_cart', ['carts']),
		...mapGetters('m_cart', ['allChecked', 'amount', 'cartCount', 'TcartCount']),
		...mapState('m_user', ['address']),
		...mapGetters('m_user', ['fullAddress']),
		goods() {
			// 将购物车中 goods_state 为 true 的商品筛选出来
			return this.carts.filter(item => item.goods_state);
		}
	},
	methods: {
		data() {
			return {};
		},
		async goPayment() {
			await this.createOrder();

			//验证订单号是否存在
			if (!this.order_number) return uni.$showToast('订单创建失败');
			//调用支付接口
			const { data: res } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
				order_number: this.order_number
			});

			uni.requestPayment({ ...res.message.pay });
		},
		async createOrder() {
			// 验证调用的接口是否存在
			if (!this.fullAddress) return uni.$showToast('请先添加地址！！！');
			if (this.goods.length === 0) return uni.$showToast('无商品QWQ');
			const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', {
				order_price: this.amount,
				consignee_addr: this.fullAddress,
				goods: this.goods
			});

			// 如果订单调成功
			if (res.meta.status === 200) {
				this.order_number = res.message.order_number;
				uni.$showToast(res.meta.msg);
			} else {
				uni.$showToast(res.meta.msg);
			}
		},
		async saveAddress() {
			// 调用 api 获取用户的收货地址
			// #ifndef MP-WEIXIN
			uni.showToast({
				title: '仅在小程有效!'
			});
			// #endif

			// #ifdef MP-WEIXIN
			const [err, { errMsg, ...address }] = await uni.chooseAddress({});
			// console.log(address);
			// 检测是否获取成历
			// #endif
			if (err) {
				return uni.showToast({
					title: '获取地址失败!',
					icon: 'none'
				});
			}
			// console.log(address);
			// 调用 mutations 来记录用户收货地址
			this.$store.commit('m_user/saveAddress', address);
		},
		//uni.navigateTo只适用于普通页面跳转  如果是tabBar的页面  只能使用uni.switchtab
		gotoBuy() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		//调用mutations 改变商品数量
		decreaseCount(index) {
			this.$store.commit('m_cart/decreaseCount', index);
		},
		increaseCount(index) {
			this.$store.commit('m_cart/increaseCount', index);
		},
		toggleState(index) {
			this.$store.commit('m_cart/toggleState', index);
		},
		toggleAll() {
			this.$store.commit('m_cart/toggleAll', this.allChecked);
		}
	}
};
</script>

<style scoped lang="scss">
.shipment {
	height: 100rpx;
	line-height: 2;
	padding: 30rpx 30rpx 40rpx 30rpx;
	font-size: 27rpx;
	color: #333;
	background-color: #fff;
	background-image: url(http://static.botue.com/ugo/images/cart_border%402x.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;

	.dt {
		width: 140rpx;
		float: left;
		clear: both;
	}

	.dd {
		padding-left: 160rpx;
	}

	.meta {
		padding-right: 50rpx;
	}

	text.phone {
		float: right;
	}
}

.carts {
	background-color: #f4f4f4;
	padding-bottom: 110rpx;
	overflow: hidden;

	.shopname {
		padding: 30rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #333;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
	}

	.goods {
		display: flex;
		padding: 30rpx 20rpx 30rpx 0;
		margin-left: 105rpx;
		border-bottom: 1rpx solid #eee;
		background-color: #fff;

		position: relative;

		.checkbox {
			width: 101rpx;
			height: 100%;
			background-color: #fff;

			display: flex;
			justify-content: center;
			align-items: center;

			position: absolute;
			left: -100rpx;
			top: 0;
		}

		&:last-child {
			border-bottom: none;
		}

		.pic {
			width: 200rpx;
			height: 200rpx;
			margin-right: 30rpx;
		}

		.meta {
			flex: 1;
			font-size: 27rpx;
			color: #333;
			position: relative;
		}

		.name {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price {
			position: absolute;
			bottom: 0;

			color: #ea4451;
			font-size: 33rpx;

			text {
				font-size: 22rpx;
			}
		}

		.amount {
			position: absolute;
			bottom: 0;
			right: 20rpx;

			height: 48rpx;
			text-align: center;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;

			display: flex;
			align-items: center;

			text {
				display: block;
				width: 60rpx;
				line-height: 48rpx;
				font-size: 36rpx;
				color: #ddd;
				text-align: center;
			}

			input {
				width: 60rpx;
				height: 48rpx;
				min-height: 48rpx;
				font-size: 27rpx;
				border-left: 1rpx solid #ddd;
				border-right: 1rpx solid #ddd;
			}
		}
	}
}

.extra {
	position: fixed;
	bottom: 0;
	/* #ifdef H5 */
	bottom: 50px;
	/* #endif */
	left: 0;
	z-index: 9;

	width: 750rpx;
	height: 96rpx;
	text-align: center;
	line-height: 96rpx;
	font-size: 36rpx;
	border-top: 1rpx solid #eee;
	background-color: #fff;
	color: #333;
	display: flex;

	.checkall {
		width: 140rpx;
		line-height: 1;
		margin-left: 25rpx;
		display: flex;
		align-items: center;

		icon {
			margin-right: 20rpx;
		}
	}

	.total {
		display: flex;
		justify-content: center;
		flex: 1;

		label,
		text {
			color: #ea4451;
			vertical-align: bottom;
			position: relative;
			bottom: -2rpx;
		}

		text {
			position: relative;
			bottom: -3rpx;
			font-size: 24rpx;

			&:first-child {
				margin-left: 10rpx;
			}
		}
	}

	.pay {
		width: 200rpx;
		background-color: #ea4451;
		color: #fff;
	}
}
</style>
